<template>
    <div class="header">
        <div class="header-left">
            <span class="iconfont">&#xe624;</span>
        </div>
        <div class="header-middle">
            <span class="iconfont search-icon">&#xe632;</span>
            <div class="kw">输入城市/景点/游玩主题</div>
            <input type="text" class="header-input">
        </div>
        <router-link to="/city" class="header-right" >
            {{ city() }}
           <span class="iconfont">&#xe6aa;</span>
        </router-link>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    name: 'Header',
    methods: {
        ...mapState({
            city: 'city'
        })
    }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/styles/variables.styl';

    .header{
        display: flex;
        width: 100%;
        height: .88rem;
        background-color: $bgColor; 
        color: #fff;
    }

    .header .header-left{
        line-height: .88rem;
        width: .8rem;
        height: 100%;
        text-align: center;
    }

    .header .header-middle{
        flex: 1;
        margin: .14rem 0 ;
        position: relative;
    }

    .header .header-middle .search-icon{
        position: absolute;
        top: .13rem;
        left: .2rem;
        color: #ece7ea;
    }

    .header .header-middle .kw{
        position: absolute;
        top: .16rem;
        left: .65rem;
        color: #ece7ea;
    }

    .header .header-middle .header-input {
        width: 100%;
        height: 100%;
        border-radius: .06rem;
    }

    .header .header-right{
        width: 1.32rem;
        line-height: .88rem;
        height: 100%;
        text-align: center;
        color: #fff;
    }
</style>